<template>
  <div>
    <div class="view-title">合伙人分销员数量</div>
    <div class="content">
      <div class="chart-content">
        <base-bar id="chart1" :eChartObj="chart1"></base-bar>
      </div>
      <div class="table-content">
        <el-table
          :data="chartTable1"
          :header-cell-style="{
            borderColor: '#F0F0F0',
            background: '#F0F0F0',
            color: '#333',
          }"
          height="250"
          :cell-style="{ borderColor: '#F0F0F0' }"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="50" align="center"/>
          <el-table-column prop="user_id" label="用户ID" align="center"/>
          <el-table-column label="手机号" width="150" align="center">
            <template v-slot="{row}">
              <span>{{ row.agent_mobile ? row.agent_mobile : '/' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="100" align="center">
            <template v-slot="{row}">
              <span>{{ row.agent_name ? row.agent_name : '/' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="distributors_count" label="数量" width="80" align="center"/>
        </el-table>

        <pagination
          v-show="totalRows1 > 0"
          :layout="layout"
          :total="totalRows1"
          :page.sync="listQuery1.pageNow"
          :limit.sync="listQuery1.pageSize"
          :autoScroll="false"
          @pagination="getAgentChildUserCount"
        >
        </pagination>
      </div>
    </div>
    <div class="view-title">分销员分销单量</div>
    <div class="content">
      <div class="chart-content">
        <base-bar id="chart2" :eChartObj="chart2"></base-bar>
      </div>
      <div class="table-content">

        <el-table
          :data="chartTable2"
          :header-cell-style="{
            borderColor: '#F0F0F0',
            background: '#F0F0F0',
            color: '#333',
          }"
          height="250"
          :cell-style="{ borderColor: '#F0F0F0' }"
          style="width: 100%"
        >
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="user_id" label="用户ID" align="center"/>
          <el-table-column label="手机号" width="150" align="center">
            <template v-slot="{row}">
              <span>{{ row.phone ? row.phone : '/' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="100" align="center">
            <template v-slot="{row}">
              <span>{{ row.nick ? row.nick : '/' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="数量" width="80" align="center"/>
        </el-table>

        <pagination
          v-show="totalRows2 > 0"
          :layout="layout"
          :total="totalRows2"
          :page.sync="listQuery2.pageNow"
          :limit.sync="listQuery2.pageSize"
          :autoScroll="false"
          @pagination="getUserFxOrderCount"
        >
        </pagination>


      </div>
    </div>
    <div class="view-title">合伙人下直销单量</div>
    <div class="content">
      <div class="chart-content">
        <base-bar id="chart3" :eChartObj="chart3"></base-bar>
      </div>
      <div class="table-content">

        <el-table
          :data="chartTable3"
          :header-cell-style="{
            borderColor: '#F0F0F0',
            background: '#F0F0F0',
            color: '#333',
          }"
          height="250"
          :cell-style="{ borderColor: '#F0F0F0' }"
          style="width: 100%"
        >
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="user_id" label="用户ID" align="center"/>
          <el-table-column label="手机号" width="150" align="center">
            <template v-slot="{row}">
              <span>{{ row.phone ? row.phone : '/' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="100" align="center">
            <template v-slot="{row}">
              <span>{{ row.nick ? row.nick : '/' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="数量" width="80" align="center"/>
        </el-table>

        <pagination
          v-show="totalRows3 > 0"
          :layout="layout"
          :total="totalRows3"
          :page.sync="listQuery3.pageNow"
          :limit.sync="listQuery3.pageSize"
          :autoScroll="false"
          @pagination="agentFxOrderCount"
        >
        </pagination>


      </div>
    </div>
    <div class="view-title">合伙人下分销单量</div>
    <div class="content">
      <div class="chart-content">
        <base-bar id="chart4" :eChartObj="chart4"></base-bar>
      </div>
      <div class="table-content">

        <el-table
          :data="chartTable4"
          :header-cell-style="{
            borderColor: '#F0F0F0',
            background: '#F0F0F0',
            color: '#333',
          }"
          height="250"
          :cell-style="{ borderColor: '#F0F0F0' }"
          style="width: 100%"
        >
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="user_id" label="用户ID" align="center"/>
          <el-table-column label="手机号" width="150" align="center">
            <template v-slot="{row}">
              <span>{{ row.phone ? row.phone : '/' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="100" align="center">
            <template v-slot="{row}">
              <span>{{ row.nick ? row.nick : '/' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="数量" width="80" align="center"/>
        </el-table>

        <pagination
          v-show="totalRows4 > 0"
          :layout="layout"
          :total="totalRows4"
          :page.sync="listQuery4.pageNow"
          :limit.sync="listQuery4.pageSize"
          :autoScroll="false"
          @pagination="agentFxUserOrderCount"
        >
        </pagination>


      </div>
    </div>
<!--    <div class="view-title">合伙人下直销+分销单量</div>-->
<!--    <div class="content">-->
<!--      <div class="chart-content"></div>-->
<!--      <div class="table-content"></div>-->
<!--    </div>-->
  </div>
</template>

<script>
import baseBar from './baseBar.vue'
import {
  getAgentChildUserCount,
  getUserFxOrderCount,
  agentFxOrderCount,
  agentFxUserOrderCount
} from '@/api/userManagement.js'

export default {
  components: {
    baseBar
  },
  data() {
    return {
      layout: 'total, prev, pager, next, jumper',
      /* 合伙人分销员数量 */
      chart1: {},
      chartTable1: [],
      listQuery1: {
        pageNow: 1,
        pageSize: 10
      },
      totalRows1: 0,
      /* 分销员分销单量 */
      chart2: {},
      chartTable2: [],
      listQuery2: {
        pageNow: 1,
        pageSize: 10
      },
      totalRows2: 0,
      /* 合伙人下直销单量 */
      chart3: {},
      chartTable3: [],
      listQuery3: {
        pageNow: 1,
        pageSize: 10
      },
      totalRows3: 0,
      /* 合伙人下分销的订单数 */
      chart4: {},
      chartTable4: [],
      listQuery4: {
        pageNow: 1,
        pageSize: 10
      },
      totalRows4: 0,
      /* 合伙人下直销+分销的订单数 */
      /* chart5: {},
      chartTable5: [],
      listQuery5: {
        pageNow: 1,
        pageSize: 10
      },
      totalRows5: 0 */

    }
  },
  mounted() {
    this.getAgentChildUserCount()
    this.getUserFxOrderCount()
    this.agentFxOrderCount()
    this.agentFxUserOrderCount()
  },
  methods: {
    /* 合伙人分销员数量 */
    getAgentChildUserCount() {
      getAgentChildUserCount({
        page_now: this.listQuery1.pageNow,
        page_size: this.listQuery1.pageSize
      }).then(res => {
        this.chartTable1 = res.data
        this.totalRows1 = res.page_info.total_count
        //判断柱状图是否有数据，有数据则不更新视图
        if (Object.keys(this.chart1).length === 0) {
          let tag = []
          let num = []
          res.data.map((i) => {
            tag.push(i.agent_name ? i.agent_name : '/')
            num.push(i.distributors_count)
          })
          this.chart1 = {
            tag: tag,
            data: num
          }
        }
      })
    },
    /* 分销员分销单量 */
    getUserFxOrderCount() {
      getUserFxOrderCount({
        page_now: this.listQuery2.pageNow,
        page_size: this.listQuery2.pageSize
      }).then(res => {
        this.chartTable2 = res.data
        this.totalRows2 = res.page_info.total_count
        //判断柱状图是否有数据，有数据则不更新视图
        if (Object.keys(this.chart2).length === 0) {
          let tag = []
          let num = []
          res.data.map((i) => {
            tag.push(i.nick ? i.nick : '/')
            num.push(i.count)
          })
          this.chart2 = {
            tag: tag,
            data: num
          }
        }
      })
    },
    /* 合伙人直销订单 */
    agentFxOrderCount() {
      agentFxOrderCount({
        page_now: this.listQuery3.pageNow,
        page_size: this.listQuery3.pageSize
      }).then(res => {
        this.chartTable3 = res.data
        this.totalRows3 = res.page_info.total_count
        //判断柱状图是否有数据，有数据则不更新视图
        if (Object.keys(this.chart3).length === 0) {
          let tag = []
          let num = []
          res.data.map((i) => {
            tag.push(i.nick ? i.nick : '/')
            num.push(i.count)
          })
          this.chart3 = {
            tag: tag,
            data: num
          }
        }
      })
    },
    /* 合伙人下的分销的订单数 */
    agentFxUserOrderCount() {
      agentFxUserOrderCount({
        page_now: this.listQuery4.pageNow,
        page_size: this.listQuery4.pageSize
      }).then(res => {
        this.chartTable4 = res.data
        this.totalRows4 = res.page_info.total_count
        //判断柱状图是否有数据，有数据则不更新视图
        if (Object.keys(this.chart4).length === 0) {
          let tag = []
          let num = []
          res.data.map((i) => {
            tag.push(i.nick ? i.nick : '/')
            num.push(i.count)
          })
          this.chart4 = {
            tag: tag,
            data: num
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;

  .chart-content {
    flex: 1;
  }

  .table-content {
    width: 40%;

    ::v-deep .el-table__body-wrapper {
      &::-webkit-scrollbar-track-piece {
        background: #fff;
      }

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: #dddee0;
        border-radius: 20px;
      }
    }
  }
}
</style>
